<!-- 终端升级 -->
<template>
  <div>
    <bs-dialog title="终端升级" :visible.sync="editor" size="default" @closed="doCloseEdit">
      <template slot="main">
        <el-form :inline="true" :model="editorForm" ref="editorFormRef" label-width="100px" size="small">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="终端类型选择:" prop="terminalType">
                        <el-select size="small" v-model="editorForm.terminalType" placeholder="请选择终端类型" clearable @change="doChangeTerminalType">
                            <el-option v-for="(item, index) in deviceTypeList" :key="index" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="升级项目选择:" prop="type">
                      <el-radio-group v-model="editorForm.type" @change="doChangeType">
                        <el-radio v-for="(item, index) in terminalSign?upgradeItem:upgradeAndroidItem" :key="index" :label="item.value">{{ item.name }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="可用文件:" prop="name">
                      <el-table 
                        :data="tableData" 
                        :show-header="false"
                        highlight-current-row
                        max-height="250"
                        @current-change="handleCurrentChange"
                      >
                        <el-table-column prop="name" label="文件名" width="300px"></el-table-column>
                        <el-table-column prop="ver" label="终端版本"></el-table-column>
                    </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </template>
      <template slot="footer">
        <bs-upload-button-icon :show-icon="false" :btn-type="btnType" @click.native.prevent="doUploadFile"></bs-upload-button-icon>
        <bs-refresh-button-icon :show-icon="false" :btn-type="btnType" @click.native.prevent="handleRefresh"></bs-refresh-button-icon>
        <bs-upgrade-button-icon :show-icon="false" :btn-type="btnType" @click.native.prevent="handleUpgrade"></bs-upgrade-button-icon>
        <bs-delete-button-icon :show-icon="false" :btn-type="btnType" @click.native.prevent="handleDelete"></bs-delete-button-icon>
        <bs-close-button-icon :show-icon="false" :btn-type="btnType" @click.native="doCloseEdit"></bs-close-button-icon>
      </template>
    </bs-dialog>
    <file-upgrade-dialog></file-upgrade-dialog>
  </div>
</template>

<script>
import FileUpgradeDialog from './FileUpgradeDialog'
import elDragDialog from '@/directive/el-drag-dialog' 
import DeviceMonitorApi from '@/api/device'
import { terminalTypeArray } from "@/const/index"
export default {
  name: 'DeviceTerminalUpgradeDialog',
  data() {
    return {
      //deviceTypeList: [{
        //name: 'Linux终端', value: '1'
      //}],
      terminalSign: true,
      deviceTypeList: terminalTypeArray,
      upgradeItem: [
        { name: '应用程序', value: 1 },
        { name: '核心程序', value: 2 },
        { name: '引导程序', value: 3 },
        { name: '配置文件', value: 4 },
        { name: '开机画面', value: 5 },
        { name: '待机画面', value: 6 },
        // { name: '公交信息', value: 7 }
      ],
      upgradeAndroidItem: [
        { name: '应用程序', value: 1 }
      ],
      editor: false,
      terminalIds:[],
      editorForm: {},
      tableData: [],
      btnType: '',
      queryData: {}
    }
  },
  created() {
    this.$eventBus.$on('showTerminalUpgradeDialog', this.show);
    this.$eventBus.$on('refreshList', this.refreshCallBack);
  },
  beforeDestroy() {
    this.$eventBus.$off('showTerminalUpgradeDialog');
    this.$eventBus.$off('refreshList');
  },
  components: {
    FileUpgradeDialog
  },
  directives: { 
    elDragDialog 
  },
  methods: {
    // 显示
    show(terminalIds, queryData) {
      this.queryData = queryData
      this.editorForm = {};
      this.tableData = [];
      this.terminalIds = terminalIds;
      this.editor = true;
    },
    handleCurrentChange(row) {
      if(row)
        this.$set(this.editorForm, 'upgradeFileId', row.id)
    },
    doUploadFile() {
      if(!this.editorForm.terminalType)
      {
        this.$alert('提示', '请先选择终端类型')
        return;
      }
      if(!this.editorForm.type)
      {
        this.$alert('提示', '请先选择升级项目')
        return;
      }
      this.$eventBus.$emit('showFileUpgradeDialog',this.editorForm);
    },
    handleRefresh(){
      delete this.editorForm.upgradeFileId
      this.requestFileList(this.editorForm)
    },
    handleDelete(){
      if(!this.editorForm.upgradeFileId)
      {
        this.$alert('提示', '请选择删除的文件')
        return;
      }
      this.$confirm('提示', '是否确认删除该文件？').then(bool => {
        if(bool) {
          this.$store.dispatch('device/deleteTerminalFile', {id:this.editorForm.upgradeFileId}).then((res) => {
            this.refreshCallBack()
          }).catch(res => {
            this.$message.error(res.msg)
          })
        }
      })
    },
    handleUpgrade(){
      if(!this.editorForm.terminalType)
      {
        this.$alert('提示', '请选择终端类型')
        return;
      }
      if(!this.editorForm.type)
      {
        this.$alert('提示', '请选择升级项目')
        return;
      }
      if(!this.editorForm.upgradeFileId)
      {
        this.$alert('提示', '请选择升级的文件')
        return;
      }
      this.editorForm.ids = this.terminalIds;
      this.$store.dispatch('device/commandUpgrade', {
        ...this.editorForm,
        ...this.queryData
      }).then((res) => {
        this.$eventBus.$emit('doCancelAllSize')
        this.editor = false
      }).catch(res => {
        this.$message.error(res.msg)
      })
    },
    // 关闭
    doCloseEdit: function () {
      this.editor = false;
    },

    doChangeTerminalType(data){
      if(this.editorForm.terminalType=='1')
      {
        this.$set(this.editorForm, 'type', 1)
        this.terminalSign = true;
        // this.editorForm.type = 1;
      }else{
        this.$set(this.editorForm, 'type', 1)
        this.terminalSign = false;
      }
      this.editorForm.terminalType = data;
      this.requestFileList(this.editorForm)
    },

    doChangeType(data){
      if(this.editorForm.terminalType)
      {
        this.editorForm.type = data;
        this.requestFileList(this.editorForm)
      }
    },

    refreshCallBack(){
      delete this.editorForm.upgradeFileId
      this.requestFileList(this.editorForm)
    },

    requestFileList(parems)
    {
      this.$store.dispatch('device/doTerminalFilelist', parems).then((res) => {
        this.tableData = res
      })
    }
  },
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog {
    width: 850px;
    height: 500px;
  }
  ::v-deep .el-dialog__body {
    margin-top: 15px;
  }
  ::v-deep .el-radio-group {
    padding-left: 0px;
  }
  ::v-deep .el-radio {
    margin-right: 15px;
  }
</style>